<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>鼠标左右晃动，文字和图片跟着晃动的视差效果 - 我爱模板网www.5imoban.net</title>
  <style>
	*{margin:0px; padding:0px;}
	div{background:#2454a6; width:100%; height:350px; position:relative; margin:0 auto;}
	img,span,p{position:absolute; color:#fff; font-family:"微软雅黑"; font-size:14px;}
	img{left:60px; top:0px;}
	span{left:60px; top:180px; font-size:14px; font-weight:bold;}
	p{left:50px; top:230px; width:350px; text-indent:2em}
  </style>
 </head>
 <body>
 <div id="sky">
	<img src="http://www.5imoban.net/view/demoimg/cloud.png" />
	<span>鼠标左右晃动，文字和图片跟着晃动的视差效果</span>
	<p>将鼠标移动到“天空”上，左右上下晃动，可以看到云层、标题和段落文字都向上下左右偏移！</p>
 </div>
  <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
 <script>
  $('#sky').on('mousemove', function(e) {
	//公式
    var offsetX = e.clientX / window.innerWidth - 0.5,
        offsetY = e.clientY / window.innerHeight - 0.5;
	var _left = -40 * offsetX;    //如果想动的幅度更大，可以调整 -40 的值
	var _top = -40 * offsetY;     //如果想动的幅度更大，可以调整 -40 的值
	// console.log(_left,_top)
	//应用公式
	$('#sky img').css('left',60+_left*0.3).css('top',_top*0.3);  //将您的left值和top值先+此数值，*的小数越大，动的越大，否则越小
	$('#sky span').css('left',60+_left*3).css('top',180+_top*3); //将您的left值和top值先+此数值，*的小数越大，动的越大，否则越小
	$('#sky p').css('left',50+_left*1.5).css('top',230+_top*1.5); //将您的left值和top值先+此数值，*的小数越大，动的越大，否则越小
  });
 </script>
 </body>
</html> 